<template>
    <div>
        <Card class="search" shadow>
            <Input prefix="ios-contact" placeholder="Enter name" style="width: auto"/>
        </Card>
        <Card shadow>
            <div class="tb-header">
                <RefreshButton :refreshList="getTableData"></RefreshButton>
                <Button type="primary" icon="ios-paper-plane" size="small" @click="start" style="margin-right: 5px">发起申请</Button>
            </div>

            <Table :height="400" size="small" :columns="columns" :data="tableData">
                <template slot-scope="{ row, index }" slot="action">
                    <Button type="primary" size="small" @click="activateOrSuspend(row)" style="margin-right: 5px">
                        <span v-if="row.isSuspended==1"><Icon type="ios-checkmark-circle-outline"/>激活</span>
                        <span v-else><Icon type="ios-close-circle-outline"/>挂起</span>
                    </Button>
                    <Button type="error" size="small" @click="del(row.processInstanceId,row.name)"
                            style="margin-right: 5px">删除
                    </Button>
                </template>
            </Table>

            <Pagination
                    ref="pagination"
                    size="small"
                    :sizer="true"
                    :page.sync="listQuery.pageNumber"
                    :rows.sync="listQuery.pageSize"
                    :total="total"
                    @on-change="getTableData"/>
        </Card>

        <Modal v-model="startModalShow" title="编辑" @on-ok="submit" @on-cancel="startModalShow=false">
            <Form ref="formInline" :model="startData" :rules="rules" :label-width="80">
                <FormItem label="流程">
                    <Select v-model="startData.processDefinitionKey">
                        <Option v-for="item in processList" :value="item.key" :key="item.key">{{ item.name }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="业务Key">
                    <Input type="text" v-model="startData.businessKey" placeholder="模型Key"/>
                </FormItem>
                <FormItem label="业务名称">
                    <Input type="text" v-model="startData.businessName" placeholder="备注"/>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>

<script>
    import {findInstancePage, editInstanceState, delInstance, startByKey, findModelPage} from '@/api/workflow';
    import Pagination from '../components/Pagination' // 分页插件
    import RefreshButton from '../components/RefreshButton' // 分页插件

    export default {
        name: "Manage",
        components: {
            Pagination, RefreshButton
        },
        data() {
            return {
                columns: [
                    {
                        title: '名称',
                        key: 'name'
                    },
                    {
                        title: '标识KEY',
                        key: 'processDefinitionKey'
                    },
                    {
                        title: '业务ID',
                        key: 'businessKey'
                    },
                    {
                        title: '激活状态',
                        key: 'isSuspendedCN'
                    },
                    {
                        title: '结束状态',
                        key: 'isEndedCN'
                    },
                    {
                        title: '图片',
                        key: 'imgName'
                    },
                    {
                        title: '发起人',
                        key: 'startUserName',
                        width: 150
                    },
                    {
                        title: '创建时间',
                        key: 'startTime',
                        width: 150
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        width: 150,
                        align: 'center'
                    }
                ],
                tableData: [],
                listQuery: {
                    pageNumber: 1,
                    pageSize: 10
                },
                total: 0,
                startModalShow: false,
                processList: [],
                startData: {},
                rules: {},
            }
        },
        created() {
            this.getTableData();
        },
        methods: {
            async getTableData() {
                this.tableData = [];
                this.total = 0;
                let params = this.listQuery
                let res = await findInstancePage(params);
                if (res.success) {
                    this.tableData = res.result.records;
                    this.total = res.result.total;
                }
            },
            //激活或挂起
            async activateOrSuspend(row) {
                let params = {
                    processInstanceId: row.processInstanceId,
                    action: row.isSuspended == '1' ? '2' : '1'
                }
                let res = await editInstanceState(params);
                if (res) {
                    this.$layer.msg(res.message, {icon: 1, time: 3});
                    this.getTableData();
                }
            },
            del(id, name) {
                this.$layer.confirm('你确定要删除流程【' + name + '】?', {icon: 3, title: '提示'}, async (index) => {
                    this.$layer.close(index);
                    let res = await delInstance(id);
                    if (res.success) {
                        this.$layer.msg(res.message, {icon: 1, time: 3});
                        this.getTableData();
                    }
                });
            },
            //发起申请
            async start(){
                this.startModalShow = true

                let params = {
                    pageNumber: 1,
                    pageSize: 10000
                }
                let res = await findModelPage(params);
                if (res.success) {
                    this.processList = res.result.records;
                }
            },
            async submit(){
                let res = await startByKey(this.startData);
                if (res.success) {
                    this.$layer.msg(res.message, {icon: 1, time: 3});
                    this.getTableData();
                }
            }
        }
    }
</script>

<style scoped>

</style>
